<template>
  <Drawer
    v-model:visible="visible"
    class="custom-class"
    title="监控指标详情"
    :destroyOnClose="true"
    width="100%"
    placement="right"
  >
    <Card>
      <AForm :model="formState" ref="formRef" v-bind="formItemLayout">
        <div class="md:flex flex-wrap">
          <ACol :span="7">
            <FormItem
              :rules="{
                required: true,
                message: '请选择监控时间',
              }"
              name="aomTimeRange"
              label="监控时间"
            >
              <div class="md:mx-5">
                <RadioGroup v-model:value="formState.aomTimeRange" button-style="solid">
                  <RadioButton value="60">近1小时</RadioButton>
                  <RadioButton value="180">近3小时</RadioButton>
                  <RadioButton value="720">近12小时</RadioButton>
                  <RadioButton value="1440">近24小时</RadioButton>
                  <RadioButton value="10080">近7天</RadioButton>
                </RadioGroup>
              </div>
            </FormItem>
          </ACol>
          <ACol :span="7">
            <FormItem
              :rules="{
                required: true,
                message: '请选择监控周期',
              }"
              name="period"
              label="周期"
            >
              <div class="md:mx-5">
                <ASelect v-model:value="formState.period">
                  <SelectOption value="1">原始值</SelectOption>
                  <SelectOption value="300">5分钟</SelectOption>
                  <SelectOption value="1200">20分钟</SelectOption>
                  <SelectOption value="3600">1小时</SelectOption>
                  <SelectOption value="14400">4小时</SelectOption>
                  <SelectOption value="86400">1天</SelectOption>
                </ASelect>
              </div>
            </FormItem>
          </ACol>
          <ACol v-if="!formState.period || formState.period === '1'" :span="7"></ACol>
          <ACol v-if="formState.period && formState.period !== '1'" :span="7">
            <FormItem
              :rules="{
                required: true,
                message: '请选择聚合方式',
              }"
              name="cesFilter"
              label="聚合方式"
            >
              <div class="md:mx-5">
                <ASelect v-model:value="formState.cesFilter">
                  <SelectOption value="average">平均值</SelectOption>
                  <SelectOption value="max">最大值</SelectOption>
                  <SelectOption value="min">最小值</SelectOption>
                  <SelectOption value="sum">求和</SelectOption>
                  <SelectOption value="variance">方差</SelectOption>
                </ASelect>
              </div>
            </FormItem>
          </ACol>
          <ACol :span="7">
            <FormItem
              :rules="{
                required: true,
                message: '请选择监控指标',
              }"
              name="metrics"
              label="监控指标"
            >
              <div class="md:mx-5">
                <ASelect v-model:value="formState.metrics" mode="multiple">
                  <SelectOption v-for="option in optionList" :key="option.metricId" :value="option.metricId">
                    {{ option.metricName }}
                  </SelectOption>
                </ASelect>
              </div>
            </FormItem>
          </ACol>
          <ACol :span="7">
            <FormItem>
              <AButton type="primary" @click="onSubmit">查询</AButton>
              <AButton style="margin-left: 10px" @click="resetForm">Reset</AButton>
            </FormItem>
          </ACol>
        </div>
      </AForm>
    </Card>
    <div class="absolute top-20 right-15"></div>
    <div class="md:flex flex-wrap">
      <ChartCard
        class="md:w-3/10 md:h-80 !md:mx-5 !md:my-8"
        v-for="chart in chartList"
        :key="chart.displayName"
        :displayName="chart.displayName"
        :maxValue="chart.maxValue"
        :minValue="chart.minValue"
        :metricName="chart.metricName"
        :unit="chart.unit"
        :time="chart.time"
        :value="chart.value"
      >
      </ChartCard>
    </div>
    <div class="absolute bottom-10 right-8">
      <AButton style="margin-right: 8px; font-weight: bolder" @click="onClose">取消</AButton>
      <AButton type="primary" style="font-weight: bolder" @click="onClose">确定</AButton>
    </div>
  </Drawer>
</template>

<script lang="ts">
/* eslint-disable*/
import { defineComponent, reactive, ref, toRaw } from 'vue';
import {
  Button,
  Col,
  Drawer,
  Form,
  FormItem,
  Select,
  SelectOption,
  Card,
  RadioGroup,
  RadioButton,
} from 'ant-design-vue';
import ChartCard from '/@/views/maintenance-center/resource-monitor/for-platform/components/chartCard.vue';
import {
  getMetricList,
  getOtherMonitor,
} from '/@/api/maintenance-center/resource-monitor/for-platform/resourceMonitor';
import { MonitorParams } from '/@/api/maintenance-center/resource-monitor/for-platform/model/monitorModel';

export default defineComponent({
  components: {
    ChartCard,
    AForm: Form,
    FormItem,
    Drawer,
    Card,
    AButton: Button,
    ACol: Col,
    ASelect: Select,
    SelectOption,
    RadioGroup,
    RadioButton,
  },
  setup() {
    const visible = ref<boolean>(false);
    const optionList = ref([]);
    const namespace = ref();
    const dimensionValue = ref();
    const formRef = ref();
    const chartList = ref([]);
    const formItemLayout = {
      labelCol: { span: 3 },
      wrapperCol: { span: 24 },
    };
    const formState = reactive<Record<string, any>>({});

    async function getCharts(params: MonitorParams) {
      chartList.value = await getOtherMonitor(params);
    }

    const onSubmit = async () => {
      let params: MonitorParams;
      formRef.value.validate().then(() => {
        params = toRaw(formState);
        params.namespace = namespace.value;
        params.dimensionValue = dimensionValue.value;
        params.cesEndTime = Date.now().toString();
        params.cesStartTime = (params.cesEndTime - params.aomTimeRange * 60 * 1000).toString();
        getCharts(params);
      });
    };
    const resetForm = () => {
      formRef.value.resetFields();
      formState.metrics = [];
    };

    const showDrawer = async (params) => {
      visible.value = true;
      namespace.value = params.namespace;
      dimensionValue.value = params.dimensionValue;
      optionList.value = await getMetricList({ namespace: params.namespace });
    };

    const onClose = async () => {
      chartList.value = null;
      await formRef.value.resetFields();
      formRef.value = null;
      formState.metrics = [];
      visible.value = false;
    };
    return {
      visible,
      formState,
      formRef,
      formItemLayout,
      onSubmit,
      showDrawer,
      onClose,
      optionList,
      chartList,
      resetForm,
    };
  },
});
</script>
